import React from 'react'
import { createBrowserRouter, redirect } from 'react-router-dom'
import Base from '@/page/base'
import Home from '@/page/home'
import Detail from '@/page/detail'
import Login from '@/page/login'
import Protected from '@/page/protected'
import { fakeAuthProvider } from './auth'

const router = createBrowserRouter([
  {
    id: 'root',
    path: '/',
    loader: Base.Loader,
    Component: Base,
    children: [
      {
        index: true,
        Component: Home
      },
      {
        path: 'detail/:id',
        Component: Detail
      },
      {
        path: 'login',
        action: Login.Action,
        loader: Login.Loader,
        Component: Login
      },
      {
        path: 'protected',
        loader: Protected.Loader,
        Component: Protected
      }
    ]
  },
  {
    path: '/logout',
    async action() {
      // We signout in a "resource route" that we can hit from a fetcher.Form
      await fakeAuthProvider.signout()
      return redirect('/')
    }
  }
])

function PublicPage() {
  return <h3>Public</h3>
}

export default router
